<template>
    <div>
        <div>
            <commpVxeTable
            :key="refreshTable"
            ref="headmanVxeTable"
            :config="config" 
            :columns="columnsVxe" 
            :formItem="formItem"
            :conditionBtnRow="true"
            @checkboxChange="checkboxChange"
            > 
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button type="primary" icon="export" ghost @click="exportClick()">导出</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:realname_default="{row}" data-desc="姓名">
                    <span style="padding-right: 21;" v-if="row.realname.length == 2">
                        <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                            {{trem}}
                            <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                </template>
                <template v-slot:sex_default="{row}">
                    <span>{{ row.sex == 1?'男':'女' }}</span>
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit" @click="editClick(row)">恢复</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye" @click="eyeClick(row)">查看</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
            <operation ref="operationRef" @generateListClick="generateListClick" />
        </div>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {
    jcyjpdjyjpdjByHf,//恢复
    jcyjpdjexportByYjpdj,
} from './service/index'
import operation from './operation.vue'
export default {
    components:{
        commpVxeTable,
        operation,
    },
    props:{

    },
    data(){
        return{
            formState:{
                fmaletxnl:60,
                ffemaletxnl:55,
            },
            refreshTable:null,
            config:{
                api: assessCheckApi.jcyjpdjyjpdjPageList,
                rowId: 'id',
                paramet:{
                }
            },
            columnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '身份证号', //列头显示文字
                field: 'fsfzh',
                width:185,
                
            },{
                title: '姓名', //列头显示文字
                field: 'realname',
                titleInterval:true,
                slots: {
                    header:'realname_header',
                    default:'realname_default',
                },
                width:70,
            },{
                title: '性别', //列头显示文字
                field: 'sex',
                titleInterval:true,
                slots: {
                    header:'sex_header',
                    default:'sex_default',
                },
                width:70,
            },{
                title: '工作单位', //列头显示文字
                field: 'fgzdw',
            },{
                title: '年龄', //列头显示文字
                field: 'fnl',
                titleInterval:true,
                slots: {
                    header:'fjhnd_header',
                },
                width:70,
            },{
                title: '审评类型', //列头显示文字
                field: 'fjcyxl',
            },{
                title: '解聘时间', //列头显示文字
                field: 'fjpsj',
                width:110,
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:175,
                fixed:'right'
            }],
            formItem:[{
                label: '关键字',
                model: 'gjz',
            }],
            selectIdArr:[],
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        checkboxChange(rowList){
            this.selectIdArr = []
            rowList.forEach((item,index)=>{
                this.selectIdArr.push(item.id)
            })
        },
        generateListClick(){
            this.refreshTable = Date.now()
        },
        unbindClick(){

        },
        exportClick(){
            jcyjpdjexportByYjpdj().then(res=>{
                if (!res) {
                    this.$message.warning('文件导出失败')
                    return
                }else{
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([res], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                    } else {
                        let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', '已解聘名单' + '.xls')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link) //下载完成移除元素
                        window.URL.revokeObjectURL(url) //释放掉blob对象
                    }
                }
            })
        },
        editClick(row){
            this.$refs.operationRef.getData({id:row.id,isType:1})
            this.$refs.operationRef.visible = true
        },
        eyeClick(row){
            this.$refs.operationRef.getData({id:row.id},true)
            this.$refs.operationRef.visible = true
        },
        deleteClick(){
            let that = this
            if(this.selectIdArr.length){
                this.$confirm({
                    title:'您确认删除吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyjpdjjpdjBydelete({ids:that.selectIdArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.$message.success(res.message)
                                that.refreshTable = Date.now()
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择删除项')
            }
        },
    }
}
</script>